<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CH洗衣客系统 - 配送员接单</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '2px',
                        DEFAULT: '4px',
                        'md': '8px',
                        'lg': '12px',
                        'xl': '16px',
                        '2xl': '20px',
                        '3xl': '24px',
                        'full': '9999px',
                        'button': '4px'
                    }
                }
            }
        }
    </script>
    <style>
        .order-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        .map-container {
            background-image: url('https://ai-public.mastergo.com/gen_page/map_placeholder_1280x720.png');
            background-size: cover;
            background-position: center;
        }
        .tab-active {
            border-bottom: 3px solid #3B82F6;
            color: #3B82F6;
            font-weight: 600;
        }
        .urgent {
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <!-- 顶部导航区 -->
    <header class="bg-white shadow-sm sticky top-0 z-10">
        <div class="container mx-auto px-6 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-4">
                <h1 class="font-['Pacifico'] text-2xl text-primary">logo</h1>
                <span class="text-xl font-semibold">CH洗衣客系统</span>
            </div>
            <div class="flex items-center space-x-6">
                <nav class="flex space-x-8">
                    <a href="#" class="py-2 px-1 tab-active">待接单</a>
                    <a href="#" class="py-2 px-1 text-gray-600 hover:text-primary">已接单</a>
                    <a href="#" class="py-2 px-1 text-gray-600 hover:text-primary">历史订单</a>
                </nav>
                <div class="flex items-center space-x-2">
                    <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white">
                        <i class="fas fa-user text-lg"></i>
                    </div>
                    <a href="about.html" class="font-medium">配送员 张伟</a>
                </div>
            </div>
        </div>
    </header>

    <!-- 主体内容区 -->
    <main class="container mx-auto px-6 py-8">
        <!-- 筛选区域 -->
        <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
            <div class="flex flex-wrap items-center justify-between gap-4">
                <div class="flex items-center space-x-4">
                    <div class="relative">
                        <select class="appearance-none bg-gray-100 border-none rounded-button py-2 pl-4 pr-8 text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary">
                            <option>全部区域</option>
                            <option>朝阳区</option>
                            <option>海淀区</option>
                            <option>西城区</option>
                            <option>东城区</option>
                        </select>
                        <div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
                            <i class="fas fa-chevron-down text-gray-500"></i>
                        </div>
                    </div>
                    <div class="relative">
                        <select class="appearance-none bg-gray-100 border-none rounded-button py-2 pl-4 pr-8 text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary">
                            <option>按时间排序</option>
                            <option>最新订单</option>
                            <option>最早订单</option>
                        </select>
                        <div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
                            <i class="fas fa-chevron-down text-gray-500"></i>
                        </div>
                    </div>
                    <div class="relative">
                        <select class="appearance-none bg-gray-100 border-none rounded-button py-2 pl-4 pr-8 text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary">
                            <option>按金额排序</option>
                            <option>从高到低</option>
                            <option>从低到高</option>
                        </select>
                        <div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
                            <i class="fas fa-chevron-down text-gray-500"></i>
                        </div>
                    </div>
                </div>
                <div class="relative w-64">
                    <input type="text" placeholder="搜索订单号..." class="w-full bg-gray-100 border-none rounded-button py-2 pl-10 pr-4 focus:outline-none focus:ring-2 focus:ring-primary">
                    <div class="absolute inset-y-0 left-0 flex items-center pl-3">
                        <i class="fas fa-search text-gray-500"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- 订单列表 -->
        <div class="grid grid-cols-1 gap-6">
            <!-- 订单卡片1 - 紧急 -->
            <div class="order-card bg-white rounded-lg shadow-sm overflow-hidden transition-all duration-200 urgent border-l-4 border-red-500">
                <div class="p-6">
                    <div class="flex justify-between items-start">
                        <div>
                            <div class="flex items-center space-x-3 mb-2">
                                <span class="text-lg font-semibold">订单号: WX20230615001</span>
                                <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">紧急</span>
                                <span class="text-gray-500 text-sm">剩余30分钟</span>
                            </div>
                            <div class="flex items-center text-gray-600 mb-1">
                                <i class="fas fa-map-marker-alt mr-2 w-4 text-center"></i>
                                <span>朝阳区 国贸三期A座 1208室</span>
                            </div>
                            <div class="flex items-center text-gray-600 mb-1">
                                <i class="fas fa-clock mr-2 w-4 text-center"></i>
                                <span>今天 14:00-15:00 取衣</span>
                            </div>
                        </div>
                        <div class="text-right">
                            <div class="text-2xl font-bold text-primary">¥128.00</div>
                            <div class="text-sm text-gray-500">距离您 1.2km</div>
                        </div>
                    </div>
                    <div class="mt-4 pt-4 border-t border-gray-100">
                        <div class="flex justify-between items-center">
                            <div>
                                <span class="text-gray-700">衣物: 3件西装, 2件衬衫, 1件羽绒服</span>
                                <div class="mt-1 text-sm text-gray-500">备注: 西装需要干洗, 衬衫需要加急</div>
                            </div>
                            <div class="flex space-x-3">
                                <button class="bg-white border border-gray-300 text-gray-700 rounded-button px-4 py-2 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary">
                                    查看详情
                                </button>
                                <button class="bg-primary text-white rounded-button px-4 py-2 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300">
                                    接单
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 订单卡片2 -->
            <div class="order-card bg-white rounded-lg shadow-sm overflow-hidden transition-all duration-200">
                <div class="p-6">
                    <div class="flex justify-between items-start">
                        <div>
                            <div class="flex items-center space-x-3 mb-2">
                                <span class="text-lg font-semibold">订单号: WX20230615002</span>
                                <span class="text-gray-500 text-sm">剩余2小时</span>
                            </div>
                            <div class="flex items-center text-gray-600 mb-1">
                                <i class="fas fa-map-marker-alt mr-2 w-4 text-center"></i>
                                <span>海淀区 中关村软件园 8号楼 302室</span>
                            </div>
                            <div class="flex items-center text-gray-600 mb-1">
                                <i class="fas fa-clock mr-2 w-4 text-center"></i>
                                <span>今天 16:00-17:00 取衣</span>
                            </div>
                        </div>
                        <div class="text-right">
                            <div class="text-2xl font-bold text-primary">¥89.00</div>
                            <div class="text-sm text-gray-500">距离您 3.5km</div>
                        </div>
                    </div>
                    <div class="mt-4 pt-4 border-t border-gray-100">
                        <div class="flex justify-between items-center">
                            <div>
                                <span class="text-gray-700">衣物: 5件T恤, 3条牛仔裤, 2件毛衣</span>
                                <div class="mt-1 text-sm text-gray-500">备注: 毛衣需要手洗, 牛仔裤需要翻面</div>
                            </div>
                            <div class="flex space-x-3">
                                <button class="bg-white border border-gray-300 text-gray-700 rounded-button px-4 py-2 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary">
                                    查看详情
                                </button>
                                <button class="bg-primary text-white rounded-button px-4 py-2 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300">
                                    接单
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 订单卡片3 -->
            <div class="order-card bg-white rounded-lg shadow-sm overflow-hidden transition-all duration-200">
                <div class="p-6">
                    <div class="flex justify-between items-start">
                        <div>
                            <div class="flex items-center space-x-3 mb-2">
                                <span class="text-lg font-semibold">订单号: WX20230615003</span>
                                <span class="text-gray-500 text-sm">剩余4小时</span>
                            </div>
                            <div class="flex items-center text-gray-600 mb-1">
                                <i class="fas fa-map-marker-alt mr-2 w-4 text-center"></i>
                                <span>西城区 金融街 丰融国际大厦 15层</span>
                            </div>
                            <div class="flex items-center text-gray-600 mb-1">
                                <i class="fas fa-clock mr-2 w-4 text-center"></i>
                                <span>今天 18:00-19:00 取衣</span>
                            </div>
                        </div>
                        <div class="text-right">
                            <div class="text-2xl font-bold text-primary">¥156.00</div>
                            <div class="text-sm text-gray-500">距离您 2.8km</div>
                        </div>
                    </div>
                    <div class="mt-4 pt-4 border-t border-gray-100">
                        <div class="flex justify-between items-center">
                            <div>
                                <span class="text-gray-700">衣物: 2套床单被罩, 4条毛巾, 1件羽绒服</span>
                                <div class="mt-1 text-sm text-gray-500">备注: 床单被罩需要高温消毒</div>
                            </div>
                            <div class="flex space-x-3">
                                <button class="bg-white border border-gray-300 text-gray-700 rounded-button px-4 py-2 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary">
                                    查看详情
                                </button>
                                <button class="bg-primary text-white rounded-button px-4 py-2 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300">
                                    接单
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 订单卡片4 -->
            <div class="order-card bg-white rounded-lg shadow-sm overflow-hidden transition-all duration-200">
                <div class="p-6">
                    <div class="flex justify-between items-start">
                        <div>
                            <div class="flex items-center space-x-3 mb-2">
                                <span class="text-lg font-semibold">订单号: WX20230615004</span>
                                <span class="text-gray-500 text-sm">剩余6小时</span>
                            </div>
                            <div class="flex items-center text-gray-600 mb-1">
                                <i class="fas fa-map-marker-alt mr-2 w-4 text-center"></i>
                                <span>东城区 王府井大街 88号 银座商场</span>
                            </div>
                            <div class="flex items-center text-gray-600 mb-1">
                                <i class="fas fa-clock mr-2 w-4 text-center"></i>
                                <span>今天 20:00-21:00 取衣</span>
                            </div>
                        </div>
                        <div class="text-right">
                            <div class="text-2xl font-bold text-primary">¥75.00</div>
                            <div class="text-sm text-gray-500">距离您 4.2km</div>
                        </div>
                    </div>
                    <div class="mt-4 pt-4 border-t border-gray-100">
                        <div class="flex justify-between items-center">
                            <div>
                                <span class="text-gray-700">衣物: 3件衬衫, 2条西裤, 1件风衣</span>
                                <div class="mt-1 text-sm text-gray-500">备注: 衬衫需要熨烫</div>
                            </div>
                            <div class="flex space-x-3">
                                <button class="bg-white border border-gray-300 text-gray-700 rounded-button px-4 py-2 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary">
                                    查看详情
                                </button>
                                <button class="bg-primary text-white rounded-button px-4 py-2 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300">
                                    接单
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 订单详情弹窗 -->
    <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden" id="orderDetailModal">
        <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-screen overflow-y-auto">
            <div class="p-6">
                <div class="flex justify-between items-center border-b pb-4">
                    <h3 class="text-2xl font-bold">订单详情</h3>
                    <button id="closeModal" class="text-gray-500 hover:text-gray-700">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
                    <div>
                        <h4 class="text-lg font-semibold mb-4">订单信息</h4>
                        <div class="space-y-4">
                            <div>
                                <p class="text-sm text-gray-500">订单编号</p>
                                <p class="font-medium">WX20230615001</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-500">下单时间</p>
                                <p class="font-medium">2023-06-15 12:30:45</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-500">订单状态</p>
                                <p class="font-medium text-red-500">待接单 (剩余25分钟)</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-500">订单金额</p>
                                <p class="font-medium text-primary text-xl">¥128.00</p>
                            </div>
                        </div>
                        <h4 class="text-lg font-semibold mt-8 mb-4">客户信息</h4>
                        <div class="space-y-4">
                            <div>
                                <p class="text-sm text-gray-500">姓名</p>
                                <p class="font-medium">李娜</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-500">联系电话</p>
                                <p class="font-medium">138****5678</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-500">取衣地址</p>
                                <p class="font-medium">朝阳区 国贸三期A座 1208室</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-500">取衣时间</p>
                                <p class="font-medium">今天 14:00-15:00</p>
                            </div>
                        </div>
                    </div>

                    <div>
                        <h4 class="text-lg font-semibold mb-4">衣物详情</h4>
                        <div class="bg-gray-50 rounded-lg p-4">
                            <div class="space-y-3">
                                <div class="flex justify-between">
                                    <span>3件西装</span>
                                    <span class="text-gray-700">¥75.00</span>
                                </div>
                                <div class="flex justify-between">
                                    <span>2件衬衫</span>
                                    <span class="text-gray-700">¥30.00</span>
                                </div>
                                <div class="flex justify-between">
                                    <span>1件羽绒服</span>
                                    <span class="text-gray-700">¥45.00</span>
                                </div>
                                <div class="border-t border-gray-200 pt-2 mt-2">
                                    <div class="flex justify-between font-semibold">
                                        <span>合计</span>
                                        <span>¥150.00</span>
                                    </div>
                                    <div class="flex justify-between text-sm text-gray-500">
                                        <span>优惠</span>
                                        <span>-¥22.00</span>
                                    </div>
                                    <div class="flex justify-between text-primary font-semibold mt-1">
                                        <span>实付</span>
                                        <span>¥128.00</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mt-4">
                            <p class="text-sm text-gray-500">客户备注</p>
                            <p class="bg-gray-50 rounded-lg p-3 mt-1">西装需要干洗, 衬衫需要加急处理, 请小心包装</p>
                        </div>
                    </div>
                </div>

                <h4 class="text-lg font-semibold mt-8 mb-4">配送路线</h4>
                <div class="map-container h-64 rounded-lg overflow-hidden"></div>

                <div class="flex justify-end space-x-4 mt-8">
                    <button class="bg-white border border-gray-300 text-gray-700 rounded-button px-6 py-2 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary">
                        取消
                    </button>
                    <button class="bg-primary text-white rounded-button px-6 py-2 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300">
                        确认接单
                    </button>
                </div>
            </div>
        </div>
    </div>
    <script>
        // 订单详情弹窗交互
        document.addEventListener('DOMContentLoaded', function() {
            const modal = document.getElementById('orderDetailModal');
            const closeBtn = document.getElementById('closeModal');
            const detailBtns = document.querySelectorAll('button:contains("查看详情")');

            // 模拟查看详情按钮点击
            detailBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    modal.classList.remove('hidden');
                });
            });

            // 关闭弹窗
            closeBtn.addEventListener('click', function() {
                modal.classList.add('hidden');
            });

            // 点击弹窗外部关闭
            modal.addEventListener('click', function(e) {
                if (e.target === modal) {
                    modal.classList.add('hidden');
                }
            });

            // 初始化地图图表
            const mapChart = echarts.init(document.querySelector('.map-container'));
            const option = {
                animation: false,
                backgroundColor: 'transparent',
                series: [{
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: [[116.46, 39.92], [116.47, 39.93]],
                    symbolSize: 10,
                    itemStyle: {
                        color: '#3B82F6'
                    }
                }],
                geo: {
                    map: 'none',
                    roam: true,
                    itemStyle: {
                        areaColor: 'transparent',
                        borderColor: '#3B82F6',
                        borderWidth: 1
                    }
                }
            };
            mapChart.setOption(option);

            // 窗口大小变化时重新调整地图大小
            window.addEventListener('resize', function() {
                mapChart.resize();
            });
        });
    </script>
</body>
</html>